<?php $this->load->view('/user/menu_company.php'); ?>

<div class="page_inner">

	<input name="new_cc" type="button" class="btn btn_new_credit_card" id="new_cc" value="<?php echo T_('Submit')?>" />
	<div class="gap10"></div>
			
	<?php echo form_open('/' . $this->curl . '/index/' . $id_user, 'id="myform" name="myform"')?>
	
	<table width="100%" border="0" cellpadding="3" cellspacing="0" id="grid" class="display">
	<thead>
	<tr>
		<th><?php echo $this->credit_cards_model->fields['first_name']; ?></th>
		<th><?php echo $this->credit_cards_model->fields['last_name']; ?></th>
		<th><?php echo $this->credit_cards_model->fields['card_type']?></th>
		<th><?php echo $this->credit_cards_model->fields['card_number']?></th>
		<th><?php echo $this->credit_cards_model->fields['card_id_number']?></th>
		<th><?php echo $this->credit_cards_model->fields['date_expired']?></th>
		<th><?php echo $this->credit_cards_model->fields['is_default_card']?></th>
		<th><?php echo T_('Edit'); ?></th>
	</tr>
	</thead>
	<tbody>
	<?php foreach ($list as $row): ?>
	<tr id="tr_<?php echo $row->id?>">
		<td><?php echo $row->first_name?></td>
		<td><?php echo $row->last_name?></td>
		<td>
			<?php 
				$cc = $this->config->item('credit_cards');
				if (!empty($cc[$row->card_type])) echo $cc[$row->card_type];
			?>
		</td>
		<td><?php echo $row->card_number?></td>
		<td><?php echo $row->card_id_number?></td>
		<td class="t-right"><?php echo $row->year_expired . '/' . $row->month_expired; ?></td>
		<td><?php if ($row->is_default_card == 1) echo T_('Yes'); else echo T_('No'); ?></td>
		<td width="26" class="t-center"><?php echo anchor($this->curl.'/edit/'.$row->id, ' ', 'class="btn_edit" alt="'.T_('Edit').'" title="'.T_('Edit').'"')?></td>
	</tr>
	<?php endforeach; ?>
	</tbody>
	<tfoot>
		<tr>
			<th></th>
			<th></th>	
			<th></th>
			<th></th>
			<th></th>
			<th></th>
			<th></th>	
			<th></th>	
		</tr>
	</tfoot>
	</table>	
	
	<?php echo form_close()?>
	
	<script type="text/javascript">
	(function($) {

		$('#new_cc').click(function(){
			location.href = '/site/credit_cards/create/';
		})
		
		/*
		 * Function: fnGetColumnData
		 * Purpose:  Return an array of table values from a particular column.
		 * Returns:  array string: 1d data array 
		 * Inputs:   object:oSettings - dataTable settings object. This is always the last argument past to the function
		 *           int:iColumn - the id of the column to extract the data from
		 *           bool:bUnique - optional - if set to false duplicated values are not filtered out
		 *           bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
		 *           bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
		 * Author:   Benedikt Forchhammer <b.forchhammer /AT\ mind2.de>
		 */
		$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
			// check that we have a column id
			if ( typeof iColumn == "undefined" ) return new Array();
			
			// by default we only wany unique data
			if ( typeof bUnique == "undefined" ) bUnique = true;
			
			// by default we do want to only look at filtered data
			if ( typeof bFiltered == "undefined" ) bFiltered = true;
			
			// by default we do not wany to include empty values
			if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
			
			// list of rows which we're going to loop through
			var aiRows;
			
			// use only filtered rows
			if (bFiltered == true) aiRows = oSettings.aiDisplay; 
			// use all rows
			else aiRows = oSettings.aiDisplayMaster; // all row numbers
	
			// set up data array	
			var asResultData = new Array();
			
			for (var i=0,c=aiRows.length; i<c; i++) {
				iRow = aiRows[i];
				var aData = this.fnGetData(iRow);
				var sValue = aData[iColumn];
				
				// ignore empty values?
				if (bIgnoreEmpty == true && sValue.length == 0) continue;
	
				// ignore unique values?
				else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
				
				// else push the value onto the result data array
				else asResultData.push(sValue);
			}
			
			return asResultData;
		}}(jQuery));
	
	
		function fnCreateSelect( aData )
		{
			var r='<select><option value=""></option>', i, iLen=aData.length;
			for ( i=0 ; i<iLen ; i++ )
			{
				r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
			}
			return r+'</select>';
		}
	
	
	var oTable;
		
	$(document).ready(function() 
	{	
		/* Add a click handler to the rows - this could be used as a callback */
		$('#grid tr').click( function() {
			if ( $(this).hasClass('row_selected') )
			{			
				$(this).removeClass('row_selected');
				$(this).find('.checkbox').removeAttr('checked');
			}			
			else
			{
				$(this).addClass('row_selected');
				$(this).find('.checkbox').attr('checked', 'checked');
			}			
		});
		
		/* Init DataTables */
		oTable = $('#grid').dataTable(
		{
			"aaSorting": [],				
			"aoColumns": [
	  			null,
	  			null,
	  			null,
	  			null,
	  			null,
	  			null,
	  			null,
	  			{ "bSortable": false },
	  		],
	  		
			"bPaginate": true,
			"bLengthChange": true,
			"bFilter": true,	
			"bSort": true,
			"bInfo": true,
			"bAutoWidth": true,
			"bJQueryUI": true,
			"sPaginationType": "full_numbers"
		});	
	
		$("tfoot th#status").each( function ( ) {
			this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(4) );
			$('select', this).change( function () {
				oTable.fnFilter( $(this).val(), 4 );
			} );
		} );			
	});
	
	/*
	 * I don't actually use this here, but it is provided as it might be useful and demonstrates
	 * getting the TR nodes from DataTables
	 */
	function fnGetSelected( oTableLocal )
	{
		var aReturn = new Array();
		var aTrs = oTableLocal.fnGetNodes();
		
		for ( var i=0 ; i<aTrs.length ; i++ )
		{
			if ( $(aTrs[i]).hasClass('row_selected') )
			{
				aReturn.push( aTrs[i] );
			}
		}
		return aReturn;
	}
	</script>
	
</div>